<template>
  <el-dialog v-if="dialogFormVisible" :title="title" :visible.sync="dialogFormVisible" center width="95%" class="dialogs">
    <el-form :model="form" :rules="rules" ref="form" inline size="small">
      <el-form-item label="商品名称" prop="packName">
        <el-input v-model="form.packName"></el-input>
      </el-form-item>

      <el-form-item label="单位" prop="unit">
        <el-input v-model="form.unit" type="text"></el-input>
      </el-form-item>

      <el-form-item label="售价" prop="amount">
        <el-input v-model="form.amount" type="number" disabled style="color:#000">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="毛利润">
        <el-input v-model="form.percentage" type="number" @input="percentageIpt">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>

    </el-form>
    <div style="display:flex">
      <tableList ref="tableList" style="padding:0 10px;width:calc(50% - 20px)" />
      <selectList ref="selectList" style="padding:0 10px;width:calc(50% - 20px)" @totals="getTotals" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="_confirm" v-loading.fullscreen.lock="fullscreenLoading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { packMaterial } from "../../../network/business";
import tableList from "./tableList";
import selectList from "./selectList";
export default {
  components: {
    tableList,
    selectList,
  },
  data() {
    return {
      title: "",
      dialogFormVisible: false,
      form: {
        packName: "",
        amount: "",
        unit: "",
      },
      rules: {
        packName: [{ required: true, message: "请输入名称", trigger: "blur" }],
        amount: [{ required: true, message: "请录入价格", trigger: "blur" }],
        unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
      },
      fullscreenLoading: false,
      orginAmount: 0,
    };
  },
  methods: {
    getTotals(val) {
      this.orginAmount = val;
      if (this.form.percentage) {
        var total = (val * (this.form.percentage / 100)).toFixed(2);
        val = Number(total) + Number(this.orginAmount);
      }
      this.$set(this.form, "amount", val);
    },
    percentageIpt(val) {
      let result = 0;
      if (val) {
        var total = ((val / 100) * this.orginAmount).toFixed(2);
        result = Number(total) + Number(this.orginAmount);
      } else {
        result = this.orginAmount;
      }
      this.$set(this.form, "amount", result);
    },
    cancel() {
      this.form = {
        packName: "",
        amount: "",
        unit: "",
        percentage: "",
      };
      this.$refs.form.resetFields();
      this.dialogFormVisible = false;
    },
    _confirm() {
      this.$refs.form.validate((validate) => {
        if (validate) {
          let materialData = this.$refs.selectList.list.map((item) => ({
            materialAmout: item.materialDefaultAmout,
            materialCode: item.materialCode,
            materialNum: item.materialNum,
          }));
          if (!materialData || !materialData.length > 0) {
            this.$error("请选择材料！");
            return;
          }
          this.fullscreenLoading = true;
          packMaterial({
            amount: this.form.amount,
            unit: this.form.unit,
            materialData,
            packName: this.form.packName,
          })
            .then((res) => {
              this.fullscreenLoading = false;
              if (res.code == 200) {
                this.$success(res.msg);
                this.$parent.getList();
                this.cancel();
              } else {
                this.$msgbox({
                  title: "温馨提示",
                  message: res.msg,
                });
              }
            })
            .catch(() => {
              this.fullscreenLoading = false;
            });
        } else {
          this.$error("请填入必填项");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogs ::v-deep {
  .el-dialog {
    margin-top: 10vh !important;
    .smallTitle {
      color: #333333;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .smallTitle::before {
      width: 3px;
      height: 12px;
      display: inline-block;
      clear: both;
      content: "";
      background: #409eff;
      margin-right: 6px;
    }
    .el-input.is-disabled .el-input__inner {
      color: #000;
    }
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>